<script setup lang='ts'>
   import selfApi from '@/apis/selfApi';
    import { onMounted, ref } from 'vue';
    import queryIDStore from '@/store/queryIDStore';
    import userStore from '@/store/userStore';
    import collectionStore from '@/store/collectionStore';

    const info =ref()
    const  selfStore= collectionStore()
   
 //当前页码
 const currentPage=ref()

 //总页数
 const totalPage=ref()
onMounted(()=>{
      
    currentPage.value =selfStore.pageNum
        selfStore.getCollectionBokByUid(currentPage.value,queryIDStore().queryUid).then((res)=>{
          info.value=res
        })

      currentPage.value =selfStore.pageNum
  totalPage.value =selfStore.totalPages;
  // console.log("info:"+info.value);
})

const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  selfStore.getCollectionBokByUid(val,queryIDStore().queryUid).then(res=>{
   info.value=res
 
  })};


  const store=(b_id:any)=>{

    queryIDStore().queryBid=b_id
  }
     
    </script>
    <template>
    
      <div>
        <div class="flex  flex-col items-start ">
            <section class="w-full border-b p-5 flex justify-between items-center hover:bg-gray-50  "
             v-for="(v,index) of info?.records" :key="v.id">
                <section class="flex justify-center items-center">
<!-- 
                  {{v}} -->
                    <div class="flex  items-center">
                    <a href="#" class="flex mr-3 rouned-sm ">
                        <img :src="v.avatar" class="flex rounded-md object-cover
                         shadow-md overflow-hidden box-border  w-[40px] h-[40px] ">
                    </a>
                 </div>
                <div class="flex flex-col ml-6">
                    <div class="flex justify-between">
                        <!-- TODO 点击之后找到对应的id,在pinia中查找到对应的用户 -->
                
                        
                    <h1 class=" text-base font-medium">{{v.title}}</h1>
                         
                 </div>
                 <div class="text-light text-gray-400 mt-1 text-sm
                  font-normal flex items-center">
                  <p class="text-pink-900 mr-2">{{v.nickName}}</p>
                    <h1>{{v.bokCreateTime}}</h1>
                 </div>
                </div>
                    </section>
    
                <!-- 是否可以删除，查看 -->
                <div class="md:ml-[100px] flex justify-end gap-5 ">
                    <router-link  @click="store(v.bid)" :to="`/blogger/content/show?id=${v.bid}`">
                    <el-button class="!bg-green-400" round>查看</el-button>
                    </router-link>
                    <!-- 本人才可以删除 -->
                    <el-button v-if="userStore().info.id==v.id" class="!bg-red-400" round>删除</el-button>
                </div>
            </section> 
            <section class="w-full flex justify-center  pt-10 pb-10">
                <el-pagination  background layout=" pager" 
                :hide-on-single-page="true"
            @current-change="handleCurrentChange"
             
            :total="totalPage*10"
            v-model:current-page="currentPage"
              />
    
            </section>
           </div>
      </div>
    </template>
    <style scoped lang='scss'>
    
    
    </style>